<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>班级空间</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/jquery-weui.min.css">
<link rel="stylesheet" href="css/weui.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src='js/swiper.min.js'></script>
<script src="js/index.js"></script>   
</head>
<body>
<div id="outwrap" style="width: 100%;height: 100%;position: relative;overflow: hidden;">
  <div class="page-container piclistcss">                                                        
              <div class="weui-tab">
                  <div class="weui-navbar page-top">
                      <a class="left" href="classroom_pic.html">
                          <img src="images/g_03.png" width="20px" height="20px">
                      </a>
                      <span class="t-title">班级相册</span>
                      <a class="right" href="javascript:;">
                          <img src="images/me.png" width="20px" height="20px">
                      </a>
                  </div>
                  <div class="weui-tab__bd page-wrap" >                                                                             
                      <div class="p-head">
                          <img src="images/wu/tt_02.jpg"  class="bg-img">
                          <div class="img-outer">
                              <div class="p-head-top">
                                  <img class="r-img" src="images/wu/t5.png" />
                                  <p class="mingyan">好好学习,天天向上!</p>
                                  <p class="name">高三(12)班 &nbsp;<a href="index.html">
                                  <img src="images/re.png" height="19px" style="margin-top:3px;"></a></p>
                                  <p class="liang">今日访问量:<span>20</span> 总浏览量:<span>150000</span></p>               
                              </div>
                              <a href="###" class="h-reload">
                                  <img src="images/yy.png" alt="" width="20px" height="20px">
                              </a>
                              <a href="classroom_set.html" class="h-set">
                                  <img src="images/set.png" alt="" width="22px" height="22px">
                              </a>
                              <div class="p-head-botm">
                                  <h3 class="sw-left">相册名称</h3>
                                  <div class="btns">
                                      <a class="sw-right" id="upBtn"><img src="images/zx_03.jpg" height="15px">上传</a>
                                      <a class="sw-right" id="s-back" style="display: none;">返回</a>
                                      <a class="sw-right" id="delBtn" style="background: #d81e06;">
                                          <img src="images/del.png" style="width: 20px;margin:5px 3px 0 0;"><span>编辑</span>
                                      </a>
                                  </div>
                                  <form action="" id="form"  style="display: none;">
                                      <input type="file" id="file">
                                  </form>
                              </div>
                          </div>
                      </div>
                      <div class="p-body" id="p-body">                                             
                          <div class="img-list zhengfang">
                              <a href="javascript:;">
                                  <img src="images/log.jpg" dpoint="center">
                              </a>
                              <a class="selOk selbtn"><i class="weui-icon-circle"></i></a>
                          </div>
                          <div class="img-list zhengfang">
                              <a href="###">
                                  <img src="images/log.jpg" dpoint="center">
                              </a>
                              <a class="selNo selbtn"><i class="weui-icon-circle"></i></a>
                          </div>
                          <div class="img-list zhengfang">
                              <a href="###">
                                  <img src="images/log.jpg" dpoint="center">
                              </a>
                              <a class="selNo selbtn"><i class="weui-icon-circle"></i></a>
                          </div>
                          <div class="img-list zhengfang">
                              <a href="###">
                                  <img src="images/log.jpg" dpoint="center">
                              </a>
                              <a class="selNo selbtn"><i class="weui-icon-circle"></i></a>
                          </div>
                          <div class="img-list zhengfang">
                              <a href="###">
                                  <img src="images/log.jpg" dpoint="center">
                              </a>
                              <a class="selNo selbtn"><i class="weui-icon-circle"></i></a>
                          </div>
                      </div>
                  </div>
              </div>
  </div>
</div>
</body>
<script>
//使 a 的高度时其宽度的 27/40,并且是 img 居中, 且随屏幕改变
$(function(){
    $.pushFn(
        function(){
           $.swFn.imgCenter($.swFn.fang(".p-body .zhengfang").find("img")); 
        }
    )();
})


//图片浏览
$("#p-body").on("click",".img-list img",function(){
    var imgs = [];
    $("#p-body").find("img").each(function(i,d){
        imgs.push(d.src);
        d.index = i;
    });
    $.photoBrowser({ items:imgs, initIndex:this.index,onClose:function(x){ 
         $(".weui-photo-browser-modal").remove()
    } }).open();
})


//上传图片
$("#upBtn").click(function(){       
    $("#file")[0].click();
})
$("#file").on("change",function(){
    $.confirm("确认上传?", function() {
        //点击确认后的回调函数
        $.showLoading();
        $.ajax({
            type:"post",
            url:"",
            data:$("#form").serialize(),
            success:function(data){
                $.hideLoading();
                $.alert("提交成功!","提示"); 
                
                    var img = $('<div class="img-list zhengfang">'+
                                    '<a href="javascript:;">'+
                                        '<img src="'+ $.swFn.getImgurl(this) +'" dpoint="center">'+
                                    '</a>'+
                                    '<a class="selNo"><i class="weui-icon-circle"></i></a>'+
                                '</div>')
                    $("#p-body").prepend(img);
                    $.swFn.imgCenter($.swFn.fang(".zhengfang").find("img"));  
                    window.picposition();


                var da = JSON.parse(data);
                console.log(da);

                
            },
            error:function(er){
                console.log(er);
            },
            timeout:5000        //超时2秒自动退出，执行sjaxStop
        })
    }, function() {
        //点击取消后的回调函数
    });
  
})

//图片操作
function fanhui(){
    $("#s-back").hide();
    $("#upBtn").show();
    $(".img-list .selbtn").hide();
    $("#delBtn").find("span").html("编辑")
}

$("#delBtn").click(function(){                           
    if($(this).find("span").text() == "删除"){
        $(".img-list").has(".weui-icon-success").remove();
        fanhui();
    }else{
        $(this).find("span").text("删除");
        $(".img-list .selbtn").show();
        $("#s-back").show();
        $("#upBtn").hide();
    }
})
//删除图片返回
$("#s-back").click(function(){
    fanhui()
})
//选择要删除的图片
$(".selbtn").click(function(){
    if($(this).find("i").hasClass('weui-icon-circle')){
        $(this).find("i").removeClass('weui-icon-circle').addClass("weui-icon-success");
    }else{
        $(this).find("i").addClass('weui-icon-circle').removeClass("weui-icon-success");
    }
})


</script>
</html>